<template>
	<div class="game-container report-container addAgent-container">
		<div class="line-member"></div>
		<div
			class="addAgent-content"
			element-loading-spinner="el-icon-loading"
		>
			<div class="form-header">
				<span>返佣模式相关设置</span>
			</div>
			<el-form ref="form" :model="form" label-width="auto" :rules="rules">
				<el-form-item label="代理返佣结算周期" prop="upperLimit">
                    <el-select v-model="form.commissionSettleCycle">
						<el-option label="半月结算" :value="1" />
                        <el-option label="每月结算" :value="2" />
                    </el-select>
				</el-form-item>
				<el-form-item>
					<el-button
						type="primary"
						size="medium"
						:loading="loading"
						@click="handleSubmit"
					>
						保存
					</el-button>
				</el-form-item>
			</el-form>
		</div>
	</div>
</template>

<script>
import { routerNames } from '@/utils/consts'
import list from '@/mixins/list'

export default {
	name: routerNames.generalClubManage,
	mixins: [list],
	data() {
		return {
			loading: false,
			form: {
				commissionSettleCycle: 1
			}
		}
	},
	computed: {
		rules() {
			const formRules = {}
			return formRules
		}
	},
	created() {
		this.query()
	},
	methods: {
		async query () {
		 	try {
				const ret = await this.$api.getProxyCommissionSettleCycle({})
				if (ret.code === 200) {
					this.form = ret.data
					this.form.commissionSettleCycle = this.form.commissionSettleCycle || undefined
				}
			} catch (err) {
				throw err
			}
		},
		handleSubmit() {
			this.$refs.form.validate((valid) => {
				if (valid) {
					this.loading = true
					this.$api
						.updateProxyCommissionSettleCycle(this.form)
						.then((res) => {
							if (res?.code === 200 && res?.data) {
								this.$message.success('修改成功')
							} else {
								this.$message.error('修改失败')
							}
						})
						.catch(() => {})
						.finally(() => {
							this.loading = false
						})
				}
			})
		}
	}
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__header {
	text-align: center;
	color: #909399;
	font-weight: 700;
}
.addAgent-container {
	background-color: #f5f5f5;
	margin: 0;
	min-height: calc(100vh - 105px);
	.line-member {
		height: 50px;
	}
	.addAgent-content {
		width: 1000px;
		margin: 0 auto;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #fff;
		position: relative;
		padding-top: 65px;
		padding-bottom: 65px;
		.form-header {
			height: 45px;
			line-height: 45px;
			span:nth-child(1) {
				position: absolute;
				left: 30px;
				top: 0;
				color: #666;
				font-size: 14px;
				font-weight: 700;
			}
			span:nth-child(2) {
				position: absolute;
				right: 30px;
				color: #999;
				font-weight: 400;
				font-size: 14px;
				top: 0;
			}
		}
		.tips {
			color: #f56c6c;
			font-size: 12px;
			line-height: 1;
			padding-top: 4px;
			position: absolute;
			top: 100%;
			left: 0;
		}
	}
	.addAgent-content::after {
		position: absolute;
		top: 45px;
		content: '';
		width: 100%;
		background-color: rgba(233, 233, 233, 1);
		height: 1px;
	}
}
.edit-form-item__label {
	text-align: right;
	vertical-align: middle;
	font-size: 14px;
	color: #606266;
	line-height: 40px;
	padding: 0 12px 0 0;
	box-sizing: border-box;
}
</style>
